<html>
<head>
	<meta charset="utf-8"/>
	
	<link rel="stylesheet" type="text/css" href="main.css" />

	<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	
	
	<script src="utilities.js"></script>

	<script src="examples/spinner.js"></script>
	<script src="examples/revolver.js"></script>
	<script src="examples/pulse.js"></script>
	<script src="examples/snake.js"></script>
	<script src="examples/waves.js"></script>
	
	<script src="init.js"></script>
	<script src="main.js"></script>
	

	<script>
		
		$(document).ready(function() {
			initCanvas();
		
			$('.start-stop-button').click(function(e) {
				e.preventDefault();
				
				// toggleRun returns true for running, false for stopped
				var text = toggleRun() ? "Pause" : "Run";
				$('.start-stop-button').text(text);
				
			});
			
			$('.speed-button').click(function(e) {
				e.preventDefault();
				
				if(_speed == 1) {
					_speed = .5;
				}
				else {
					_speed = 1;
				}
				
				var text = _speed == 1 ? "Normal Speed" : "Slow";
				$('.speed-button').text(text);
				
			});
			
		});
		
		
	</script>
	
</head>
<body>
	<div class="container">

		<div class="backing">
			<canvas width="1000" height="500" class="scribble-canvas"></canvas>
		</div>
		<button class="start-stop-button">Pause</button>
		
		<button class="speed-button">Normal Speed</button>
		
		<div class="overlay info"></div>
		
	</div>
</body>

